<template>
 	<view>
		
		 <view class="container" >
			 <view v-if="!pageList.length">
				 <tui-loadmore :visible="true" text="加载中..."></tui-loadmore>
			 </view>
			 <view v-else>
				<block  v-for="(item,index) in pageList" :key="index">
					<!-- <uni-section class="section-title" :title="item.name" type="line"></uni-section> -->
					<view class="jiange"></view>
					<view class="section-title">
						{{item.name}}
					</view>
					<tui-grid>
						<block v-for="(item2,index2) in item.children" :key="index2">
							<tui-grid-item :cell="4" @click="gotopage_(item2.url)">
								<view class="tui-grid-icon" :style="{backgroundColor:item2.iconBgColor}">
									<text v-if="item2.icon" class="goods-manage-icon icon" v-html="item2.icon"></text>
									<text v-else class="goods-manage-icon icon">&#xe604;</text>
								</view>
								<text class="tui-grid-label">{{item2.name}}</text>
							</tui-grid-item>
						</block>
					</tui-grid>
				</block>
				<!-- <view class="bottomBlock"></view> -->
			</view>
			
			
			<tui-list-view>
				<tui-list-cell :arrow="true" @click="gotoFrom">
					自定义表单组件
				</tui-list-cell>
			</tui-list-view>
			<tui-list-view>
				<tui-list-cell :arrow="true" @click="gotoFrom2">
					自定义表单组件2
				</tui-list-cell>
			</tui-list-view>
			<tui-list-view>
				<tui-list-cell :arrow="true" @click="gotoFrom3">
					自定义表单组件3
				</tui-list-cell>
			</tui-list-view>
			
	<!-- <kmlc-form-select-user label="单选" select-type="single" v-model="selectData"></kmlc-form-select-user>
	<view>single:{{selectData}}</view>
	<kmlc-form-select-user label="多选" show-type='' select-type="multiple" v-model="selectDataMul" ></kmlc-form-select-user>
	<view>multiple:{{selectDataMul}}</view> -->

		</view>
	
	 </view>
</template>

<script>
	import  {getMenueList}  from '@/pages/work/interface.js'
	import  {gotoPage} from  '@/common/framework/utils/navigate.js' 
import {
		user,
		interFace
	} from '@/common/framework'

	
	export default {
		
		data() {
			return {
			pageList: [],
			selectDataMul:[],
			selectData:[],
			defaultColor:['#CE0AF5','#007aff']
			};
		},
		onLoad: function (options) {
			this.getMenueLists();

		},
		 onPullDownRefresh() {
			console.log('refresh');
			this.getMenueLists();

		},
		mounted(){
			let res = interFace.getInterface('addressBook');
			console.log('asdfasfas:',res);
		},
		computed:{
			url(){
				return getApp().globalData.webApiUrl;
			}
		},
		methods:{
			gotopage_(url){
				console.log(url);
				url &&gotoPage(url);
			},
			async getMenueLists() {
				let user_ = user.getUserInfo();
				let Res = await getMenueList({
					token:user_.token
				});
				uni.stopPullDownRefresh();
				// console.log('Res:',Res);
				if(Res && Res.success){
					this.pageList = Res.result.menu &&Res.result.menu[0]&&Res.result.menu[0].children;
					
				}else{
					uni.showToast({
					title:Res.message||'数据获取失败~！',
					icon:'none'
					})
				}
			},
			
			goDetailPage(url){
				gotoPage(url);
			},
			async test(){
				// let ret = await this.$http.get('/kmlc/sys/dict/getDictItems/production_type_code');
				let ret = await test();
				console.log(ret);
				this.data = ret.data;
			},
			clear(){
				this.data ={};
			},
			modalTap: function (e) {
				uni.showModal({
					title: "弹窗标题",
					content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
					showCancel: false,
					confirmText: "确定"
				})
			},
			noTitlemodalTap: function (e) {
				uni.showModal({
					content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
					confirmText: "确定",
					cancelText: "取消"
				})
			},
			showLoading: function() {
				uni.showLoading({
					title: 'loading'
				});
			
				// #ifdef MP-ALIPAY
				this._showTimer && clearTimeout(this._showTimer);
				this._showTimer = setTimeout(() => {
					this.hideLoading();
				}, 3000)
				// #endif
			},
			hideLoading: function() {
				uni.hideLoading();
			},
			onChange(data){
				console.log('onChange:',data)
				this.selectData = data;
			},
			onChange2(data){
				console.log('onChange2:',data)
				this.selectDataMul = data;
			},
			gotoFrom(){
				gotoPage('/pages/customForm/index/index');
			},
			gotoFrom2(){
				gotoPage('/pages/customForm/index2/index');
			},
			gotoFrom3(){
				gotoPage('/pages/customForm/index3/index');
			}
		}
	}
</script>

<style lang="scss" scope>
.container{
 background-color: #fff;
 display: flex;
flex-direction: column;
box-sizing: border-box;
padding-bottom: env(safe-area-inset-bottom);
.tui-grids::after{
border: none;
}
.tui-grid::before{
border: none;
}
.tui-grid::after{
border: none;
}
}

.section-title{
	box-sizing: border-box;
	font-size: 36upx;
	line-height: 2.5;
	padding-left: 24upx;

}

.jiange {
	// border: 0.5px solid #ccc;
	background-color: #ddd;
	height: 1.5vh;

}
.tui-grid-icon {
		width: 84upx;
		height: 84upx;
		box-sizing:content-box;
		margin: 0 auto;
		padding: 15upx;
		text-align: center;
		vertical-align: middle;
		border-radius: 8upx;
		background-color:#007aff;
		color: #fff;
	}

	.tui-grid-icon+.tui-grid-label {
		margin-top: 10upx;
	}

	.tui-grid-label {
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 30upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.goods-manage-icon{
		font-size: 48upx;
	}

</style>
